<template>
  <el-row style="min-height: 460px">
    <el-col :span="8" class="sea-card">
      <el-card shadow="hover">
        <div style="text-align: center; padding: 16px" class="bg-primary">
          <div class="role-icon box-circle">
            <i class="fa fa-user-secret text-fatal" style="margin-left: 6px"></i>
          </div>
          <h5>管理员</h5>
        </div>
        <div style="margin-top: 16px">
          <span>
            管理员 （Administrator）拥有完整的系统权限，角色的权限自上而下派发，管理员是最顶级的账号。
          </span>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16" class="sea-card">
      <el-card shadow="hover">
        <el-tabs>
          <!--基础信息-->
          <el-tab-pane label="基础信息">
            <smart-form ref="form_modify" method="PUT" url="/sys/role/info"
                        :object="object" :model="form_data">
              <smart-form-layout require hidden name="id" label="ID">
                <smart-text-view name="id" placeholder="ID"></smart-text-view>
              </smart-form-layout>
              <smart-form-layout require name="authorityCode" label="授权码">
                <smart-text-view name="authorityCode" placeholder="授权码"></smart-text-view>
              </smart-form-layout>
              <smart-form-layout require name="roleName" label="角色名称">
                <smart-text-view name="roleName" placeholder="角色名称"></smart-text-view>
              </smart-form-layout>
              <smart-form-layout require name="description" label="角色描述">
                <smart-text-view type="textarea" name="description" placeholder="角色描述"></smart-text-view>
              </smart-form-layout>
            </smart-form>
          </el-tab-pane>

          <!--菜单权限-->
          <el-tab-pane label="菜单权限">
            <grant-menu :object="object" :on-succeed="onSucceed"></grant-menu>
          </el-tab-pane>

          <!--操作权限-->
          <el-tab-pane label="操作权限">
            <grant-permit :object="object" :on-succeed="onSucceed"></grant-permit>
          </el-tab-pane>
        </el-tabs>
        <!--tab end-->
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import GrantMenu from "./grant/menu";
import GrantPermit from "./grant/permit";

export default {
    name: "Edit",
    components: {GrantMenu, GrantPermit},
    data() {
        return {
            // 是否展开弹出层
            expend: false,
            // 当前操作的数据
            row_data: undefined,

            // form-data start 表单数据对象模型
            form_data: [
                {
                    name: 'id', label: 'ID', value: ''
                    , rules: [
                        {required: true, message: '[ID]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'orgId', label: '机构ID', value: ''
                    , rules: [
                        {required: true, message: '[机构ID]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'authorityCode', label: '授权码', value: ''
                    , rules: [
                        {required: true, message: '[授权码]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 32, message: '最多32字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'roleName', label: '角色名称', value: ''
                    , rules: [
                        {required: true, message: '[角色名称]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 64, message: '最多64字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'icon', label: '', value: ''
                    , rules: [
                        {required: true, message: '[]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 255, message: '最多255字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'disabled', label: '是否可用', value: ''
                },
                {
                    name: 'editable', label: '是否可编辑', value: ''
                },
                {
                    name: 'description', label: '描述', value: ''
                    , rules: [
                        {required: true, message: '[描述]字段不允许为空 ', trigger: 'blur'},
                        {min: 0, max: 128, message: '最多128字符', trigger: 'blur'}
                    ]
                },
                {
                    name: 'gmtCreate', label: '创建日期', value: ''
                },
                {
                    name: 'gmtModified', label: '', value: ''
                },
            ]
            // form-data end
        }
    },
    props: {
        // 当前需要操作的数据对象
        object: {type: Object, default: undefined},
        // 成功回调，通常是刷新数据表格
        onSucceed: {type: Function, default: undefined}
    }
}
</script>

<style scoped>
.role-icon {
    width: 156px;
    height: 156px;
    font-size: 108px;
    text-align: center;
    background-color: #FFFFFF;
    margin: 0 auto;
    border: 1px solid #777;
    color: rgba(0, 0, 0, 0.15);
}
</style>